<template>
    <div class="ModifyNameCard">
        <div class="topView">
            <div class="r-bg">
                <x-img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585215767558&di=d658d3ac5cbc9aa49f6bdee21c59a5d6&imgtype=0&src=http%3A%2F%2Fent.k618.cn%2Fylzx%2F201612%2FW020161231691371482636.jpeg" class="img"></x-img>
                <span class="replace">更换照片</span>
            </div>
            <div class="l-bg">
                <p class="textLayout" style="color: black">刘德华</p>
                <div class="bottomView">
                    <img src="" style="width:20px;height:20px;background-color:yellow;margin-top:5px;margin-left:10px; vertical-align: bottom;">
                    <span style="font-size:16px;margin-left: 5px;color: rgb(100, 100, 100);">行业：软件开发</span>
                </div>
                <p class="textLayout">手机 Call</p>
                <input type="text" class="inputLayout">
                <p class="textLayout">邮箱 Email</p>
                <input type="text" class="inputLayout">
                <p class="textLayout">微信 Wechat</p>
                <input type="text" class="inputLayout">
            </div>
        </div>
        
        <div class="chooseView">
            <p style="color: rgb(100, 100, 100);font-size: 16px;margin-left: 10px; padding-top:8px;">选择所属联盟组</p>
            <!-- <selector placeholder="请选择省份" v-model="demo02" :options="list" class="selector"></selector> -->
        </div>
        <div style="width:100%;background-color:white">
            <p style="color: rgb(100, 100, 100);font-size: 16px;margin-left: 10px; padding-top:8px;">公司名称 Company name</p>
            <input type="text" class="inputBottomLayout" >
        </div>
        <div style="background-color:white">
            <label style="color: rgb(100, 100, 100);font-size: 16px;margin-left: 10px; padding-top:8px;">职务 Postition</label>
            <input type="text" class="positionLayout">
        </div>
        <div style="width:100%;background-color:white">
            <p style="color: rgb(100, 100, 100);font-size: 16px;margin-left: 10px; padding-top:8px;">公司地址 Company address
                <span class="location">先地址定位</span>
            </p>
            <input type="text" class="inputBottomLayout" >
        </div>
         <div class="btnBottomBg">
            <p class="sinUpButton">交换名片</p>
        </div>
    </div>
    
</template>
<script>
import { XImg } from 'vux'  
import { Selector, Group, Cell, CellBox, XButton } from 'vux'

export default {    
  name: 'ModifyNameCard',
  data () {
    return {

        list: [{key: 'gd', value: '广东'}, {key: 'gx', value: '广西'}],

    }
  },
   components: {
    XImg,
    Group,
    Selector,
    Cell,
    CellBox,
    XButton
  },
  methods: {
    onChange (val) {
      console.log(val)
    },
    getValue (ref) {
      this.$vux.alert.show({
        title: 'getFullValue',
        content: this.$refs[ref].getFullValue()
      })
    }
  }
}
</script>
<style scoped>
    .topView {
        width: 100%;
        height: 270px;
        background-color: white;
        display: flex;
    }
    .img {
        width: 85%;
        height: 200px;
        margin-top: 15px;
        /* margin-left: 15px; */
    }
    .r-bg {
        width: 50%;
        height: 300px;
        /* background-color: yellow; */
        text-align: center;
    }
    .l-bg {
        width: 50%;
        height: 300px;
        
        /* background-color: red; */
        
    }
    .textLayout {
        font-size: 16px;
        margin-top: 10px;
        margin-left: 10px;
        color: rgb(100, 100, 100);
    }
      .bottomView {
        /* height: 20px; */
        width: 100%;
        /* display: flex; */
        /* margin-top: 10px; */
        /* flex-direction: row; */
    }
    .inputLayout {
        outline-style: none ;
        background:none;  
	    outline:none;  
	    border:1px solid rgb(211, 211, 211);
        border-radius: 4px;
        height: 20px;
        margin-left: 10px;
        margin-top: 10px;
      
    }
    .replace {
        width: 80px;
        height: 25px;
        border:1px solid rgb(211, 211, 211);
        border-radius: 4px;
        text-align: center;
        display: block;
        margin: 5px auto;
        font-size: 14px;
        color: rgb(100, 100, 100);
        line-height: 25px;
    }
    .chooseView {
        width: 100%;
        height: 40px;
        background-color: white;
        /* display: flex; */

    }
    .inputBottomLayout {
        outline-style: none ;
        background:none;  
	    outline:none;  
	    border:1px solid rgb(211, 211, 211);
        border-radius: 4px;
        height: 30px;
        width: 90%;
        margin-left: 10px;
        margin-top: 10px;
    }
    .positionLayout {
        outline-style: none ;
        background:none;  
	    outline:none;  
	    border:1px solid rgb(211, 211, 211);
        border-radius: 4px;
        height: 30px;
        width: 59%;
        margin-left: 10px;
        margin-top: 10px;
        display: block;
        display: inline-block;

    }
    .sinUpButton {
    background-color: rgb(238, 194, 109);
    width: 80%;
    height: 40px;
    color: white;
    text-align:center;
    display: inline-block;
    line-height: 40px;
    border-radius: 5px;
    margin-top: 20px;
  }
  .location {
    width: 80px;
    height: 20px;
    border:1px solid rgb(238, 194, 109);
    border-radius: 4px;
    text-align: center;
    font-size: 10px;
    float: right;
    margin-right: 20px;
    color: rgb(238, 194, 109);
    line-height: 20px;
  }
 .btnBottomBg {
    /* width: 80%; */
    height: 100px;
    background-color: white;
    position: fixed;
    bottom:0px;
    width: 100%;
    text-align: center;
  }
</style>